<template>
  <div class="utils" >
     <!-- 注意这里的音乐盒子 -->
        <audio id="myaudio" ref="myaudio" controls autoplay="autoplay" loop src="./Where memory had stopped.ogg"></audio>
        <img src="./images/设置.png">
        <div class="box">
          <div @click="fullScreen" class="btn circle">全屏</div>
          <div @click="exitScreen" class="btn circle">退出全屏</div>
          <div @click="play=!play" class="btn circle">开启/关闭音乐</div>
        </div>
      </div>
</template>

<script>
export default {
    name:"Utils",
    data(){
        return{
            play: true,
            isFull:false,
        }
    },
    methods: {
    fullScreen() {
      this.isFull=true;
      document.documentElement.requestFullscreen();
    },
    exitScreen() {
      //解决这样的一个问题：failed to execute exitfullscreen on document，意思是在未全屏的情况下触发exitFullscreen，会报这个错
      if(this.isFull){
        document.exitFullscreen();
      }
      this.isFull=false;
    }
  },
  watch:{
      play:{
        immediate:false,
        handler(a,b){
            if(b){
              this.$refs.myaudio.play();
            }else{
              this.$refs.myaudio.pause()
            }
        }
      }
  }
}
</script>

<style scoped>
/* 这里将页面设置工具栏 */
.btn {
  width: 80px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border-radius: 20px;
  box-sizing: border-box;
}

.circle {
  background-color: #e74c3c;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.circle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  border-radius: 50%;
  background-color: #c0392b;
  transform-origin: center;
  transition: ease-in-out .5s;
}

.circle:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}
.utils {
  top: calc(100% - 200px);
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 20;
}

.utils>img {
  width: 100%;
  transition: 2s ease;
  margin-left: -100%;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 90%;
  left: 0;
  transform: translateX(-100%);
  transition: 2s ease;
  width: 160px;
  height: 160px;
  background-image: url(./images/bg1.jpg);
  background-size: 200px 180px;
  background-repeat: no-repeat;
}

.utils:hover img {
  rotate: 360deg;
}

.utils:hover .box {
  transform: translateX(0);
  border-radius: 30px;
  border-bottom-left-radius:0 ;
  border-top-left-radius:0 ;
}

/* 这里设置那个音乐播放器 */
#myaudio {
  position: absolute;
  visibility: hidden;
}
</style>
